<template>
  <div class="left-pane-page">
    <!-- 页面 -->
    <div class="pages-manager" :style="{ 'max-height': page.height + 'px' }">
      <header>
        <div class="left">
          <a-tooltip placement="topLeft">
            <template slot="title">
              <span>页面</span>
            </template>
            <icon name="icon-xinjian" />
          </a-tooltip>
          <a-tooltip placement="topLeft">
            <template slot="title">
              <span>文件夹</span>
            </template>
            <icon name="icon-wenjianjiashouqi" />
          </a-tooltip>
        </div>
        <div class="center">
          <icon name="icon-sousuo" />
          <icon name="icon-wenjianjiazhankai" />
        </div>
        <icon name="icon-gengduo2" />
      </header>
      <main>
        <div class="page-scroll-list">
          <ul>
            <li v-for="i in 60" :key="i">
              <div class="page">
                <!-- 选中：icon-doc-s，未选中：icon-doc-line -->
                <div class="left">
                  <icon name="icon-doc-line" />
                  <span>页面名称{{ i }}</span>
                </div>
                <div class="right">
                  <icon name="icon-more01" />
                </div>
              </div>
            </li>
          </ul>
        </div>
      </main>
    </div>
    <div id="element-manager" class="element-manager" :style="{ 'height': ele.height + 'px' }">
      <header>
        <div class="left">
          <span>元素</span>
        </div>
        <div class="center">
          <icon name="icon-sousuo" />
        </div>
        <icon name="icon-jian" />
      </header>
      <main>
        <div class="element-scroll-list">
          <ul>
            <li>
              <div class="page">
                <div class="left">
                  <icon name="icon-kuaisukaidian" />
                  <span>链接区域</span>
                </div>
                <div class="right">
                  <icon name="icon-33" />
                  <icon name="icon-yincang" />
                  <icon name="icon-kuaisukaidian" />
                </div>
              </div>
            </li>
            <li>
              <div class="page">
                <div class="left">
                  <icon name="icon-htmal5icon12" />
                  <span>图片</span>
                </div>
                <div class="right">
                  <icon name="icon-33" />
                  <icon name="icon-yincang" />
                  <icon name="icon-kuaisukaidian" />
                </div>
              </div>
            </li>
            <li>
              <div class="page">
                <div class="left">
                  <icon name="icon-zhixian_huaban1" />
                  <span>线条</span>
                </div>
                <div class="right">
                  <icon name="icon-33" />
                  <icon name="icon-yincang" />
                  <icon name="icon-kuaisukaidian" />
                </div>
              </div>
            </li>
            <li>
              <div class="page">
                <div class="left">
                  <icon name="icon-juxing" />
                  <span>矩形</span>
                </div>
                <div class="right">
                  <icon name="icon-33" />
                  <icon name="icon-yincang" />
                  <icon name="icon-kuaisukaidian" />
                </div>
              </div>
            </li>
            <li>
              <div class="page">
                <div class="left">
                  <icon name="icon-wenzigongju" />
                  <span>双击编辑文本</span>
                </div>
                <div class="right">
                  <icon name="icon-33" />
                  <icon name="icon-yincang" />
                  <icon name="icon-kuaisukaidian" />
                </div>
              </div>
            </li>
            <li v-for="index in 10" :key="index">
              <div class="page">
                <div class="left">
                  <icon name="icon-wenzigongju" />
                  <span>xxx{{ index }}</span>
                </div>
              </div>
            </li>
          </ul>
        </div>
      </main>
    </div>
  </div>
</template>
<script>
export default {
  name: 'left-pane-page',
  mounted() {
    // TODO 监听window resize

    let $this = this

    // pane
    let _leftPanePage= document.querySelector('.left-pane-page')
    let paneHeight = _leftPanePage.offsetHeight
    this.ele.height = paneHeight - this.page.height
    console.log('左侧页面管理高度：',paneHeight,this.page.height,this.ele.height)
    // 元素管理
    let _elementManager = document.getElementById('element-manager')
    _elementManager.onmousedown = function(de) {
      de.preventDefault()
      // 移动元素管理
      _elementManager.onmousemove = function(me) {
        let _height = $this.page.height + me.movementY
        let _elHeight = paneHeight - _height
        if (
          _height >= $this.page.minHeight &&
          _elHeight >= $this.ele.minHeight &&
          _height <= $this.page.maxHeight
        ) {
          // 计算页面管理高度
          $this.page.height = _height
          $this.ele.height = _elHeight
        }
        //
      }
    }
    // .getElementById('pane222')
    document.onmouseup = function(e) {
      // _elementManager.onmousedown = null
      _elementManager.onmousemove = null
    }
  },
  data() {
    return {
      page: {
        maxHeight: 700,
        minHeight: 100,
        height: 400
      },
      ele:{
        height: 500,
        minHeight:100
      }
    }
  }
}
</script>
<style lang="less" scoped>
  .left-pane-page{
    height: 100%;
  }
// 通用
header {
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-shrink: 0;
  padding: 0px 4px 0px 10px;
  border-top: 1px solid transparent;
  border-bottom: 1px solid rgb(219, 219, 219);
  .icon {
    padding: 0px 4px;
    width: 26px;
    height: 26px;
  }
  .left {
    display: flex;
    height: 100%;
    align-items: center;
    color: rgb(65, 80, 88);
    transition: flex 0.2s ease-in-out 0s;
  }

  .center {
    height: 100%;
    flex: 1;
    display: flex;
    justify-content: flex-end;
    align-items: center;
  }
  .right {
    height: 100%;
    display: flex;
    margin-left: auto;
    align-items: center;
    height: 100%;
    color: rgb(65, 80, 88);
    transition: flex 0.2s ease-in-out 0s;
  }
} // end header
main {
  width: calc(100% - 2px);
  min-height: 100px;
  overflow-x: hidden;
  overflow-y: auto;
  display: flex;
  .page-scroll-list,
  .element-scroll-list {
    .icon {
      margin-right: 4px;
    }
    .left {
      display: flex;
      align-items: center;
    }
    .right {
      display: flex;
      align-items: center;
    }
    ul,
    li {
      padding: 0;
      width: 100%;
    }
    li {
      cursor: pointer;
      .page {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 8px;
      } // end .page
      icon {
        color: #8d9ea7;
      }
    } // end li
    li:hover {
      background: rgb(242, 242, 242);
    }
  }
} // end main
.pages-manager {
  display: flex;
  flex-direction: column;
  overflow-x: hidden;
  overflow-y: auto;
  // max-height: 700px;
  header {
    .left {
      cursor: pointer;
    }
    .left .icon:hover {
      color: rgb(41, 141, 248);
    }
  } // end header
  main {
    // height: 500px;
    min-height: 100px;
    .page-scroll-list {
      flex: 1;
    }
  } // end main
} // end .pages-manager
.element-manager {
  width: 100%;
  background: rgb(255, 255, 255);
  display: flex;
  flex-direction: column;
  overflow-x: hidden;
  overflow-y: auto;
  // max-height: 400px;
  flex: 1 1 0;
  header {
    border-top: 1px solid rgb(219, 219, 219);
  }
  main {
    // height: 100%;
    display: flex;
    flex-direction: column;
    overflow-x: hidden;
    overflow-y: auto;
    .element-scroll-list {
      flex: 1;

      .right {
        .icon {
          width: 16px;
          height: 16px;
        }
      }
    }
    //
  }
} // end .element-manager
.element-manager:hover {
  cursor: grab;
}
</style>
